<template>
  <div class="trace-settings">
    <div :span="10" class="part">
      <div class="header">汽车零部件溯源界面配置</div>
      <el-form :model="form" ref="form" label-width="250px" class="form">
        <el-form-item label="基本信息" prop="baseInfo">
          <el-radio-group v-model="form.baseInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品信息" prop="productInfo">
          <el-radio-group v-model="form.productInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品详情" prop="productDetail">
          <el-radio-group v-model="form.productDetail">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生产批次信息" prop="supplierInfo">
          <el-radio-group v-model="form.supplierInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主要原材料信息" prop="materialInfo">
          <el-radio-group v-model="form.materialInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生产信息" prop="produceInfo">
          <el-radio-group v-model="form.produceInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="质检信息" prop="qualityInfo">
          <el-radio-group v-model="form.qualityInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="包装信息" prop="packageInfo">
          <el-radio-group v-model="form.packageInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="零售商信息" prop="retailerInfo">
          <el-radio-group v-model="form.retailerInfo">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">确认</el-button>
          <el-button @click="reset('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updateSettings, getSettings } from "../../api/trace/settings";
export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    submit() {
      updateSettings(this.form).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "溯源界面设置成功",
            type: "success",
          });
        }
        else{
        this.$message.error('溯源界面设置失败');
        }
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    getSettings().then((res) => {
      this.form = res.data;
    });
  },
};
</script>

<style>
.trace-settings {
  display: flex;
  padding: 3% 0;
}
.trace-settings .part {
  border: 1px solid #e7dddd;
  margin: auto;
  width: 650px;
}
.trace-settings .part .header {
  text-align: center;
  padding: 20px;
  font-size: 20px;
}
.trace-settings .el-radio {
  padding-right: 130px;
}
.trace-settings .el-form-item__label {
  padding-right: 100px;
}
</style>